<script lang="ts" setup>
import type { IEquipmentInfo } from "@/api/info/type";
import { useBasicInfoStore, useCharacterStore, useConfigStore } from "@/store";
import { getImage } from "@/utils";

const props = defineProps({
  eqs: {
    type: Array as PropType<IEquipmentInfo[]>,
    default: () => []
  },
  showTips: {
    type: Boolean,
    default: true
  },
  fusion: {
    type: Array as PropType<IEquipmentInfo[]>,
    default: () => []
  },
  selectMode: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(["clickEqu"])

const eqpos = ref([
  { id: 1, type: "left", label: "上衣", top: 10, left: 47 },
  { id: 2, type: "left", label: "下装", top: 57, left: 0 },
  { id: 3, type: "left", label: "头肩", top: 10, left: 0 },
  { id: 4, type: "left", label: "腰带", top: 57, left: 47 },
  { id: 5, type: "left", label: "鞋", top: 104, left: 0 },
  { id: 6, type: "right", label: "手镯", top: 57, left: 47 },
  { id: 7, type: "right", label: "项链", top: 57, left: 0 },
  { id: 8, type: "right", label: "戒指", top: 104, left: 0 },
  { id: 9, type: "right", label: "辅助装备", top: 104, left: 47 },
  { id: 10, type: "right", label: "魔法石", top: 151, left: 0 },
  { id: 11, type: "right", label: "耳环", top: 151, left: 47 },
  { id: 12, type: "right", label: "武器", top: 10, left: 47 },
  { id: 13, type: "right", label: "称号", top: 10, left: 0 },
  { id: 16, type: "left", label: "宠物", top: 104, left: 47 }
])
// 直接发射到上层，调用上层的点击事件
const clickEq = (eq: IEquipmentInfo) => {
  emit("clickEqu", eq, true, true)
}

const infoStore = useBasicInfoStore()
const configStore = useConfigStore()

const changRole = async () => {
  configStore.save()
  await useCharacterStore().newCharacter(infoStore.currentRole, "default", "0")
}
</script>

<template>
  <view class="eq-panel-box">
    <view class="eq-panel" :style="{ backgroundImage: `url('${getImage('common/head.png')}')` }">
      <view class="eq-panel-inner">
        <view
          v-for="(p, i) in eqpos"
          :key="i"
          class="eq-item-box"
          :style="`top: ${p.top}px; ${p.type}: ${p.left}px;`"
        >
          <EqIcon
            :gray="false"
            :eq="props.eqs.filter(a => a.part == p.label)?.[0] ?? {}"
            not-use-island
            @tap="clickEq(props.eqs.filter(a => a.part == p.label)?.[0])"
          />
          <EqIcon
            v-if="props.fusion.filter(a => a.part == p.label)?.[0]"
            style="position: absolute;bottom:-5px;left:-5px"
            small-icon
            :eq="props.fusion.filter(a => a.part == p.label)?.[0]"
            @tap="clickEq(props.fusion.filter(a => a.part == p.label)?.[0])"
          />
        </view>
        <uni-data-picker
          v-model="infoStore.currentRole"
          dark
          :clear-icon="false"
          style="position: absolute;top: 160px;width: 150px;left: 0px;"
          placeholder="角色"
          :localdata="infoStore.adventure"
          @change="changRole"
        />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.eq-panel-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #000;
}
.eq-panel {
  height: 215px;
  width: 320px;
  // background-image: url(@/assets/images/equip/c-b-2.jpg);
  background-size: 100%;
  background-position: center;

  .eq-panel-inner {
    width: calc(100% - 25px);
    height: 100%;
    position: relative;
    left: 15px;
    top: 5px;
  }

  .eq-item-box {
    width: 42px;
    height: 42px;
    position: absolute;

    &.fwq {
      transform: scale(0.85);
    }

    .eq-pos-label {
      position: absolute;
      top: 0;
      left: 2px;
      font-size: 12px;
      text-align: center;
      line-height: 36px;
      width: 30px;
      height: 30px;
      color: #6a6a6a;
      overflow: hidden;
    }
  }
}
</style>
